<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="shared/css_js::header">
	<title>门 店</title>
	<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/muicss/mui.css"/>
</head>

<style>
	body{
		font-family: SimHei,"微软雅黑",sans-serif;
	}
	.content-items li{
		list-style: none;
		float: left;
		padding: 4px 8px;
		margin: 5px;
		border: 1px #ededed solid;
		cursor: pointer;
		font-weight: 700;
		color: #666;
	}
	.star-vote{
		width:120px;
		height:20px;
		position:relative;
		overflow:hidden;
	}
	.star-vote>span{
		position:absolute;
		width:100px;
		height:20px;
		background-repeat:no-repeat;
		left:0;
		top:0;
	}
	.star-vote>.add-star{
		background-image:url("/img/star.png");
	}
	.star-vote>.del-star{
		background-image:url("/img/greystar.png");
		background-color:white;
	}

	.mui-slider-group{
		margin-top: 0px;
	}
</style>
<body>
	<header class="mui-bar mui-bar-nav">
		<a id="backshop" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">门店详情</h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<div class="mui-bar mui-bar-tab">
			<div class="weui-tabbar" style="text-align: center;height: 55px">
				<div class="weui-tabbar__item" style="color: white;border-right: 1px #B2B2B2;background-color: black;flex-grow: 2">
					<div class="weui-cell" style="padding: 0;position: relative">
						<h4 style="position: absolute;left: 25%;top:10%;margin-top:10px">合计:¥<span id="totalprice">0</span></h4>
					</div>
					<p class="weui-tabbar__label" style="position: absolute;bottom: 0;left: 30%;">(不含安装费)</p>
				</div>
				<!--<div style="width: 80px">-->
					<!--<div class="weui-tabbar__icon"  style="margin-top: 5px">-->
						<!--<img th:src="@{/img/my/order/wait_pj.png}"/>-->
					<!--</div>-->
					<!--<p class="weui-tabbar__label" style="padding-top: 5px">客服</p>-->
				<!--</div>-->
				<a id="orderbtn" data-target="#half" class="weui-tabbar__item" style="background-color: #CE3C39;flex-grow: 1">
					<h4 style="color: white;padding-top: 7%">去预约</h4>
				</a>
			</div>
		</div>
	</nav>
	<div class="mui-content">
		<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop" style="max-height: 220px">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div th:each="pic,picStat:${pic}" th:if="${picStat.last}" class="mui-slider-item mui-slider-item-duplicate">
					<a href="javascript:void(0)">
						<img style="height: 225px" th:src="@{'/common/image?filename='+${pic.picurl}}" />
					</a>
				</div>
				<div th:each="pic,picStat:${pic}" class="mui-slider-item">
					<a href="javascript:void(0)">
						<img style="height: 225px" th:src="@{'/common/image?filename='+${pic.picurl}}" />
					</a>
				</div>
				<div th:each="pic,picStat:${pic}" th:if="${picStat.first}" class="mui-slider-item mui-slider-item-duplicate">
					<a href="javascript:void(0)">
						<img style="height: 225px" th:src="@{'/common/image?filename='+${pic.picurl}}" />
					</a>
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" style="padding-bottom: 0;padding-top: 3px">
					<div class="weui-flex">
						<div class="weui-flex__item" style="flex-grow: 5">
							<p style="color: black">营业时间: <span th:text="${shop.beginworktime}"></span>-<span th:text="${shop.endworktime}"></span></p>
						</div>
						<div class="weui-flex__item" style="flex-grow: 1">
							<!--<p class="fa fa-location-arrow" th:onclick="'javascript:shopmap(\''+${shop.lat}+'\',\''+${shop.lon}+'\')'" style="float: right;color: black"></p>-->
							<p class="fa fa-location-arrow " th:onclick="'javascript:shopwxmap(\''+${shop.lat}+'\',\''+${shop.lon}+'\')'" style="float: right;color: black;font-size: 22px;padding-left: 5px"></p>
							<p style="float: right;color: black"> 导航 </p>
						</div>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<input type="hidden" id="chnid" th:value="${shop.chnid}"/>
					<div class="weui-flex">
						<div class="weui-flex__item" >
							<p class="name" th:text="${shop.chnname}"></p>
						</div>
					</div>
					<p class='order'>
						总订单 <span th:text="${shop.num}"></span> | 总评价 <span class="com" th:text="${shop.com==null?'暂无':#numbers.formatDecimal(shop.com, 0, 2)}"></span>
						<span class="mui-pull-right shoptel" style="color:#929292;" th:text="${shop.tel}"></span>
					</p>
					<div class="weui-flex">
						<div class="weui-flex__item" style="flex-grow: 3">
							<span class="weizhi shopaddr" th:text="${shop.addr}"></span>
						</div>
						<div class="weui-flex__item" style="flex-grow: 1;position: relative">
							<p><span th:if="${shop.distance!=null}" th:text="${shop.distance/10+'KM'}" class="mui-pull-right" style="color:#929292;margin-top: 3px;"></span></p>

						</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="weui-cells__title"></div>
		<div class="weui-cells">
			<a class="weui-cell weui-cell_access open-popup" href="javascript:void(0)" data-target="#allitem">
				<div class="weui-cell__bd">
					服务项目(共<span id="itemnum" th:text="${itemnum.itemnum}"></span>个项目)
				</div>
				<div class="weui-cell__ft">
					<p>已选<span id="itemsel">0</span>个项目</p>
				</div>
			</a>
		</div>


		<div class="weui-cells__title"></div>
		<ul class="mui-table-view mui-table-view-chevron ">
			<li class="mui-table-view-cell mui-collapse" id="servlist">
				<a href="javascript:void(0)" class="weui-cell weui-cell_access"  style="padding: 10px 15px">
					<div class="weui-cell__bd">
						服务顾问(共<span id="servnum" th:text="${servnum.servnum}"></span>人)<span style="float: right" class="serv"></span>
					</div>
				</a>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-media" style="padding: 10px 15px">
						<div class="weui-flex sss" style="height: 30px">
							<div class="mui-input-row mui-radio mui-left weui-flex__item">
								<input class="servrad" name="radio2" value="0" type="radio" style="left:2%;top:-1px;"/>
							</div>
							<div class="weui-flex__item">
								<h5 class="gname" style="float: right;color: black">无顾问</h5>
							</div>
						</div>
					</li>
					<li th:each="servlist:${servlist}" class="mui-table-view-cell mui-media" style="padding: 10px 15px">
						<div class="weui-flex sss">
							<div class="mui-input-row mui-radio mui-left weui-flex__item" style="flex-grow: 1">
								<input class="servrad" name="radio2" th:value="${servlist.staffid}" type="radio" style="left:5%;top:20%"/>
							</div>
							<div class="weui-flex__item" style="flex-grow: 7">
								<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg"/>
								<div class="mui-media-body">
									<p class="gname" style="color: black" th:text="${servlist.staffname}">
									</p>
									<p style="color: black">评价
										<span class='com' th:text="${servlist.com==null?'暂无':#numbers.formatDecimal(servlist.com, 0, 2)}"></span> | <span th:text="${servlist.num}"></span>单
										<a th:href="@{/shopdetailserv(chnid=${shop.chnid},servid=${servlist.staffid})}" class="mui-pull-right open-popup detail" style="color: #CE3C39" >详情</a>
									</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</li>
		</ul>

		<div class="weui-cells__title"></div>
		<ul class="mui-table-view">
			<li class="mui-table-view-divider">用户评价</li>
			<li th:each="com:${com}" class="mui-table-view-cell mui-media">
				<div>
					<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg" style="max-width:30px;height: 30px "/>
					<div class="mui-media-body">
						<p class="mui-pull-right" th:text="${#dates.format(com.createtime,'yyyy-MM-dd')}"></p>
						<p th:text="${#strings.substring(com.custname,0,1)+'先生'}"></p>
						<!--<p style="color: red" th:text="'评分:'+${com.commstar}"></p>-->
						<p class="star_con star-vote">
							<span class="add-star" style="background-size: 75px"></span>
							<span class="del-star" style="background-size: 75px"></span>
							<span class="point" style="color: red;left:80px" th:text="${com.commstar}+'.00'"></span>
						</p>
						<p style="color: black;font-size: 16px" th:text="${com.commcontent}"></p>
						<p>
							<span class="mui-pull-right" style="font-size: 12px" th:text="${com.servitemname}"></span> <span style="font-size: 12px;color: black" th:text="${com.carfactname}+' '+${com.carlinename}"></span>
						</p>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell mui-media">
				<!--<p class="open-popup" style="text-align: center;color: black" data-target="#allcomment">查看全部评论</p>-->
				<a style="text-align: center;color: black" th:href="@{/shopcom(chnid=${shop.chnid})}">查看全部评论</a>
			</li>
		</ul>
	</div>

	<!--查看项目-->
	<div id="allitem" class="weui-popup__container">
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">

			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left close-popup"></a>
				<h1 class="mui-title">服务项目</h1>
				<a class="mui-icon mui-icon-right-nav mui-pull-right close-popup" style="color: black;font-size: 19px;margin-top: 3px">完成</a>
			</header>
			<div class="mui-content">
				<div class="weui-panel weui-panel_access" style="border-bottom:1px solid #999">
					<div th:if="${custcar!=null}" class="weui-flex" style="border-bottom:1px solid #999;padding:10px 5px;">
						<div class="weui-flex__item" style="flex-grow: 1;padding: 3px 5px">
							<img style="width: 50px;height: 50px" class="weui-media-box__thumb" th:src="'/img/caricon/'+${custcar.brandlogo}"/>
						</div>
						<div class="weui-flex__item" style="flex-grow: 10;">
							<h4 class="weui-media-box__title" th:text="${custcar.carfactname}+' '+${custcar.carlinename}"></h4>
							<p class="weui-media-box__desc">
								<span th:text="${custcar.carvol}"></span>
								<span th:text="${custcar.caryear}+'年'"></span>
							</p>
						</div>
						<div class="weui-flex__item" style="flex-grow: 4;">
							<div class="weui-cell weui-cell_access" href="javascript:;" style="padding: 5px 5px">
								<div class="weui-cell__bd">
									<p style="font-size: 18px;color: black;padding-bottom: 4px" id="carpro" onclick="showpro()">粤</p>
								</div>
								<div class="weui-cell__ft">
									<input type="text" id='carno1' th:onchange="'javascript:savecarno()'" style="border: none;width:66px;margin:0;padding:0;text-align: right;" maxlength="6" placeholder="车牌号"/>
								</div>
								<input id="custcarid" type="hidden" th:value="${custcar.custcarid}"/>
							</div>
						</div>
						<input type="hidden" th:value="${custcar.carno}" th:id="carno"/><!--存储读取的车牌号码-->
					</div>
					<div th:if="${custcar!=null}" class="weui-flex" style="border-bottom:1px solid #999">
						<div class="weui-flex__item" style="border-right:1px solid #999">
							<div class="weui-cell weui-cell_access" style="padding:5px 5px">
								<div class="weui-cell__bd">
									<p>里程</p>
								</div>
								<div class="weui-cell__ft">
									<input type="text" id='kmpicker' style="border: none;width:82px;margin:0;padding:0" readonly="readonly"/>
									<input type="hidden" id='km' th:value="${custcar.curkilo}"/>
									<span  id="ppp" style="font-size: 12px">KM</span>
								</div>
							</div>
						</div>
						<div class="weui-flex__item ">
							<div class="weui-cell weui-cell_access" style="padding: 5px 3px">
								<div class="weui-cell__bd">
									<p>上路时间</p>
								</div>
								<div class="weui-cell__ft">
									<input id="datesel" type="text" data-toggle="date" th:value="${custcar.regdate}" style="border: none;width:95px;margin:0;padding:0px" readonly="readonly"/>
								</div>
							</div>
						</div>
					</div>
					<div th:if="${custcar==null}">
						<a th:if="${custid!=null}" style="border-bottom:1px solid #999" class="weui-cell weui-cell_access" th:href="@{/person/addcar(flag=2,shopid=${shop.chnid})}">
							<div class="weui-cell__bd">
								<p class="fff" th:data="1">您还没有选择默认车型</p>
							</div>
							<div class="weui-cell__ft">
								<p>请选择</p>
							</div>
						</a>
						<a th:if="${custid==null}" class="weui-cell weui-cell_access" th:href="@{/person/login(flag=2,shopid=${shop.chnid})}" style="border-bottom:1px solid #999">
							<div class="weui-cell__bd">
								<p class="fff" th:data="0">您还没有登录</p>
							</div>
							<div class="weui-cell__ft">
								<p>请登录</p>
							</div>
						</a>
					</div>
					<div class="weui-panel__bd">
						<div class="weui-cell weui-cell_access" href="javascript:;">
							<div class="weui-cell__bd">
								<p>已选<span id="itemsel2">0</span>个项目(共<span id="itemnum2" th:text="${itemnum.itemnum}"></span>个项目)</p>
							</div>
						</div>
					</div>
				</div>
				<div th:each="list3:${list3}">
				<div class="weui-cells__title" th:text="${list3.dictname}"></div>
					<ul th:each="list2:${list2}" th:if="${list2.belongcode==list3.belongcode}" class="mui-table-view mui-table-view-chevron total">
						<li th:each="list1:${list1}" th:if="${list2.packid==list1.packid}" class="mui-table-view-cell mui-collapse">
							<a class="suc" href="#" th:data="${list1.packid}">
								<div class="weui-flex">
									<div class="circle">
										<span class="weui-icon-circle" ></span>
									</div>
									<div class="weui-flex__item" >
										<label th:text="${list1.packname}"></label>
										<p th:text="${list1.remark}"></p>
									</div>
								</div>
							</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li th:each="list:${list}" th:if="${list.packid==list1.packid}" class="mui-table-view-cell shoptotal" style="padding-right: 0">
									<!--<img th:src="@{/img/by/jiyou.png}" />-->
									<div class="shop" th:data="${list.servitemid}">
										<div class="weui-flex">
											<div class="weui-flex__item" style="flex-grow: 3">
												<p class="itemname" th:text="${list.servitemname}"></p>
												<!--<p>全合成</p>-->
												<p>¥<span class="price" th:text="${list.whprice}"></span></p>
											</div>
											<div class="weui-flex__item" style="flex-grow: 1;position: relative">
												<span class="fa fa-trash" style="margin-right: 10px;float: right"></span>
												<div class="weui-count" style="float: right;bottom: 0px;right: 10px;position: absolute">
													<a class="weui-count__btn weui-count__decrease"></a>
													<span>x</span><span class="num">1</span>
													<a class="weui-count__btn weui-count__increase"></a>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

		</div>
	</div>

	<!--预约时间-->
	<div id="half" class="weui-popup__container popup-bottom">
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">
			<div class="weui-cells weui-cells_form">
				<header style="padding: 20px 0;background-color: #f7f7f7"><h4 style="text-align: center">请选择</h4></header>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">预约日期</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" data-toggle="date" type="text" readonly="readonly" style="margin-bottom: 0" id="datepicker"/>
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">预约时间</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" readonly="readonly" style="margin-bottom: 0" id="timesel" placeholder="请先选择预约日期" />
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<a href="javascript:;"  class="weui-btn weui-btn_default close-popup" style="width: 100px;float: right">返 回</a>
					</div>
					<div class="weui-cell__bd">
						<a href="javascript:;" id="submit" class="weui-btn weui-btn_default" style="width: 100px;float: right">提交预约</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--&lt;!&ndash;商家地图&ndash;&gt;-->
	<!--<div id="map" class="weui-popup__container">-->
		<!--<div class="weui-popup__overlay"></div>-->
		<!--<div class="weui-popup__modal">-->

			<!--<header class="mui-bar mui-bar-nav">-->
				<!--<a class="mui-icon mui-icon-left-nav mui-pull-left close-popup"></a>-->
				<!--<h1 class="mui-title">门店位置</h1>-->
			<!--</header>-->
			<!--<div class="mui-content">-->
				<!--<div id="container" style="width:400px; height:580px"></div>-->
				<!--<div id="panel"></div>-->
				<!--<div class='center'>-->
					<!--<div id='bt' class="btmtip">点击去高德地图</div>-->
				<!--</div>-->
			<!--</div>-->
		<!--</div>-->
	<!--</div>-->

	<div id="wxmap" class="weui-popup__container">
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">

			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left close-popup"></a>
				<h1 class="mui-title">门店位置</h1>
			</header>
			<div class="mui-content">

			</div>
		</div>
	</div>

	<input id="accesstoken" type="hidden" th:value="${accesstoken}"/>
	<input id="appId" type="hidden" th:value="${appId}"/>
	<input id="timestamp" type="hidden" th:value="${timestamp}"/>
	<input id="nonceStr" type="hidden" th:value="${nonceStr}"/>
	<input id="signature" type="hidden" th:value="${signature}"/>

	<input id="shopid" type="hidden" th:value="${shop.chnid}"/>
	<!--用户经纬度-->
	<!--<input id="lat" type="hidden" th:value="${lat}"/>-->
	<!--<input id="lon" type="hidden" th:value="${lon}"/>-->
	<input id="shoplat" type="hidden" th:value="${shop.lat}"/>
	<input id="shoplon" type="hidden" th:value="${shop.lon}"/>


<!--<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=e001d49f941c6992e70edd5322efbcb6&plugin=AMap.Geocoder&plugin=AMap.Drivingplugin=AMap.ToolBar"></script>-->

<script th:inline="javascript">
        /*<![CDATA[*/
        /*获取基础access_token接口*/
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: $("#appId").val(), // 必填，公众号的唯一标识
            timestamp:$("#timestamp").val() , // 必填，生成签名的时间戳
            nonceStr: $("#nonceStr").val(), // 必填，生成签名的随机串
            signature: $("#signature").val(),// 必填，签名，见附录1
            jsApiList: ["openLocation", "getLocation", "chooseLocation"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        function shopwxmap() {
            $.openPopup('#wxmap');
            var lat=$("#shoplat").val();
            var lon=$("#shoplon").val();
            var name=$(".name").text();
            var shopaddr=$(".shopaddr").text();
			wx.openLocation({
				latitude: lat,
				longitude: lon,
				scale: 26,
				name:name,
                address:shopaddr
			})
        }

	$("#orderbtn").click(function () {
		var f=$("#itemsel").text();
		if(f==0){
		    $.alert('请先选择服务项目!');
            $.openPopup("#allitem");
		} else {
            var fff = $(".fff").attr('data');
            if (fff == 0) {
                $.alert("请先登录");
                var shopid = $("#shopid").val();
                location.href = "/person/login?flag=2&shopid=" + shopid;
            } else if (fff == 1) {
                $.alert("请先选择默认车型");
                var shopid = $("#shopid").val();
                location.href = "/person/addcar?flag=2&shopid=" + shopid;
            } else {
                if ($("#datesel").val() == '') {
                    $.alert("请先选择上路时间");
                    $.openPopup("#allitem");
                } else {
                    $.openPopup("#half");
                }
            }
		}
    });

	$("#submit").click(function () {
		var date = $("#datepicker").val();
		var time = $("#timesel").val();
		var chnid = $("#chnid").val();
		var kmp = $("#kmpicker").val();
		var km = kmp.replace(/\s+/g, "");
		var cardate = $("#cardate").val();
		var servid = $('input:radio[name="radio2"]:checked').val();
		if (date == '') {
			$.alert('请先选择预约日期!')
		} else {
		    if(time==''){
                $.alert('请选择预约时间!')
			} else {
                $.showLoading("正在预约...");
                var storage = window.localStorage;
                var item = storage.getItem("item");
				var shoptel=$(".shoptel").text();
				var shopaddr=$(".shopaddr").text();
				var chnname=$(".name").text();
                var data = {
                    shoplist: item,
                    time: time,
                    km: km,
                    cardate: cardate,
                    date: date,
                    shopid: chnid,
                    servid: servid,
                    shoptel:shoptel,
                    shopaddr:shopaddr,
                    chnname:chnname
                };
                mui.ajax('/shopdetailorder', {
                    data: {
                        shop: JSON.stringify(data)
                    },
                    dataType: 'json',//服务器返回json格式数据
                    type: 'post',//HTTP请求类型
                    success: function (data) {
                        storage.clear();
                        $.hideLoading();
                        $.alert('预约成功,请等待门店确认!');
                        location.href="/person/personhome";
                    },
                    error: function (data) {
                        $.alert('预约失败,请重试!')
                    }
                })
			}
		}
    });

    $(document).ready(function () {
        var storage = window.localStorage;
		//加载行驶里程
        var km = $("#km").val();
        if(km!=null) {
            km = km.split("");
            var kmp = "";
            for (var i = 0; i < 6 - km.length; i++) {
                kmp += "0 ";
            }
            for (var j = 0; j < km.length; j++) {
                kmp += km[j] + " ";
            }
            var kmpload = storage.getItem("kmp");
            if (kmpload == kmp || kmpload == null) {
                loadkm(kmp);
            } else {
                loadkm(kmpload);
            }
        }
		var chn=$("#chnid").val();
        var chnid=storage.getItem("chnid");
		//加载已经选择的项目
		if(chn==chnid){
            loadselitem();
			var serv=storage.getItem("serv");
			if(serv!=null)
			$(".serv").text("已选:"+serv);
		}
        /*分割车牌赋值*/
        var carno=$("#carno").val();
        if(carno!=""&&carno!=null){
            var carpro=carno.substring(0,1);
            var carnum=carno.substring(1);
            $("#carpro").text(carpro);
            $("#carno1").val(carnum);
        }
        $(".star_con").each(function () {
            var points= $(this).find(".point").text();
            var con_wid=$(this).outerWidth();
            var del_move=(points*con_wid)/8;

            var bp=-del_move+"px 0px";
            var sl=del_move+"px";
            $(this).find(".del-star").css("background-position",bp);
            $(this).find(".del-star").css("left",sl);
        });
    });

    //选择项目
    mui(".mui-collapse").on('tap', '.suc', function(event){
        var id=$(this).find(".circle").children(":eq(0)").attr('class');
        if(id=="weui-icon-circle")
        {
            var flag=true;
            $(this).parent().find(".shop").each(function () {//查找是否有重复的项目
                var sid=$(this).attr('data');
                $(".total").each(function () {
                    var circle= $(this).find(".circle").children(":eq(0)").attr('class');
                    if(circle=="weui-icon-success")
                    {
                        $(this).find(".shop").each(function () {
                            var sid1=$(this).attr('data');
                            if(sid1==sid){
                                var ot=$(this).closest(".total");//该total为找到的重复项目
                                ot.find(".circle").children(":eq(0)").attr('class','weui-icon-circle');//取消之前已选中的分组
                                ot.children().removeClass('mui-active');
                                flag=false;
                                return flag;
                            }
                        });
                    }
                    return flag;
                });
                return flag;
            });
            $(this).find(".circle").children(":eq(0)").attr('class',"weui-icon-success");
        }
        if(id=="weui-icon-success")
        {
            $(this).find(".circle").children(":eq(0)").attr('class',"weui-icon-circle");
        }
        count()
    });


        //通过localStorage加载已选服务项目
    function loadselitem() {
        var storage=window.localStorage;
        var item=storage.getItem("item");
        if(item!='') {
            var it = item.split(',');
            for (var i = 0; i < it.length; i++) {
                var flag = true;
                $(".suc").each(function () {
                    if (flag) {
                        var data = $(this).attr('data');//分组编号
                        if (data == it[i]) {
                            $(this).find(".circle").children(":eq(0)").attr('class', 'weui-icon-success');
                            $(this).closest('.total').children(":eq(0)").addClass("mui-active");
                            $(this).closest('.total').addClass('pack');
                            $(this).closest('.total').find('.shop').each(function () {
                                var itemid = $(this).attr('data');
                                if (itemid == it[i + 1]) {
                                    $(this).addClass('pick');
                                    $(this).find('.num').text(it[i + 2]);
                                    i += 2;
                                    flag = false;
                                }
                            });
                        }
                    }
                });
            }
            $(".pack").each(function () {
                $(this).find('.shoptotal').each(function () {
                    var cla = $(this).find('.shop').attr('class');
                    if (cla == 'shop pick') {

                    } else {
                        $(this).css('display', 'none');
                    }
                })
            });
            count()
        }
    }


    //计算被选中项目的总金额以及数量
    function count() {
        var storage=window.localStorage;
		var array=new Array();
        var i=0;
        var total=0;
        //得到被选中的项目
        $(".total").each(function () {
            var circle=$(this).find(".circle").children(":eq(0)").attr('class');
            if(circle=="weui-icon-success")
            {
                $(this).find(".shop").each(function () {
                    var packid=$(this).closest('.total').find('.suc').attr('data');
                    var dis=$(this).parent().css('display');
                    if(dis!='none'){
                        var price = $(this).find(".price").text();
                        var num = $(this).find(".num").text();
                        total+=parseFloat(price)*parseFloat(num);
                        i++;
                        var data=$(this).attr('data');
                        array.push(packid);
                        array.push(data);
                        array.push(num);
                    }
                });
            }
        });
        $("#totalprice").text(total);
        $("#itemsel").text(i);
        $("#itemsel2").text(i);
        storage.setItem("item",array);
        storage.setItem("chnid",$("#chnid").val());
    }

    //计数器
    $(".weui-count__increase").click(function () {
        var num=$(this).parent().find(".num").text();
        var number = parseInt(num || "0") + 1;
        $(this).parent().find(".num").text(number);
        count()
    });
    $('.weui-count__decrease').click(function () {
        var num=$(this).parent().find(".num").text();
        var number = parseInt(num || "0") - 1;
        if(number==0){
            number=1;
        }
        $(this).parent().find(".num").text(number);
        count()
    });

    //删除项目(将该项目隐藏)
    $(".fa-trash").click(function () {
        $(this).closest('.mui-table-view-cell').css('display','none');
        var flag=true;//用于判断是否所有项目都删除了
        $(this).closest('.mui-table-view-chevron').children().each(function () {
            var d=$(this).css('display');
            if(d=='list-item'){
                flag=false;
            }
        });
        if(flag){
            var t=$(this).closest(".total");
            t.find('.circle').children(":eq(0)").attr('class','weui-icon-circle');
            t.children().removeClass("mui-active");
            t.find('.mui-table-view-chevron').children().each(function () {
                $(this).css('display','');
            })
        }
        count();
    });

    //post提交
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }
        document.body.appendChild(temp);
        temp.submit();
        return temp;
    }

        mui.getJSON('/shopdetailtime',function(data){
            var d=data.toString();
            var time=d.split(',');
            $("#datepicker").calendar({
                dateFormat:"yyyy-mm-dd",
                minDate:time[0],
                maxDate:time[1],
                onClose:function () {
					$("#timesel").removeAttr('disabled');
					$("#timesel").removeAttr('placeholder');
					loadtime()
                },
                onOpen:function () {
                    $("#timesel").val("");
                }
            });
        });

        $("#timesel").select({
            title: "请选择预约时间",
            items: [{
                title: ""
            }],
            onOpen:function () {
            },
            beforeClose:function () {
            }
        });

        function loadtime() {
            $.showLoading("加载预约时间中...");
            mui.ajax('/shopdetailbooktime', {
                data: {
                    chnid: $("#shopid").val(),
                    bookdate: $("#datepicker").val()
                },
                dataType: 'json',//服务器返回json格式数据
                type: 'get',//HTTP请求类型
                success: function (json) {
                    var data=json.result;
                    var d = data[0].toString();
                    var time = d.split(',');
                    $("#timesel").select("update", { items:time });
                    var d1 = data[1].toString();
                    d1=d1.replace("[","");
                    d1=d1.replace("]","");
                    d1=d1.replace(" ","");
                    var reptime = d1.split(',');
                    $("#timesel").select("update", { onOpen:function () {
                        for (var i = 0; i < reptime.length; i++) {
                            $(".weui-check_label").each(function () {
                                var text = $(this).find("p").text();
                                if (reptime[i] == text && text != "") {
                                    $(this).find("p").css('color', '#CE3C39');
                                    $(this).find("p").addClass("warn");
                                    return false;
                                }
                            })
                        }
                    } });
                    $("#timesel").select("update", { beforeClose:function () {
                        var c=$('input:radio[name="weui-select"]:checked').closest('.weui-check_label').find("p").attr('class');
                        if(c=='warn'){
                            $.toast("该时间段工位数已满","forbidden");
                            return false;
                        }
                        return true;
                    } });
                }
            });
            $.hideLoading();
        }

    //日期选择器
    $("#datesel").calendar({
        dateFormat:"yyyy-mm-dd",
        onClose:function () {
            var date=$("#datesel").val();
            mui.ajax('/item/updatedate',{
                data:{
                    date:date
                },
                type:'get',//HTTP请求类型
                success:function(data){
                    $.toptip('更新成功',2000, 'success');
                }
            })
        }
    });

	function loadkm(kmp) {
		$("#kmpicker").val(kmp);
		$("#kmpicker").picker({
			title: "请选择行驶里程",
			cols: [
				{
					values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
					//如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
				},
				{
					values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
				},
				{
					values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
				},
				{
					values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
				},
				{
					values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
				},
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                }
			],
			onClose:function () {
				var kmp=$("#kmpicker").val();
				var km=kmp.replace(/\s+/g,"");
				mui.ajax('/item/updatekm',{
					data:{
						km:km
					},
					type:'get',//HTTP请求类型
					success:function(data){
						$.toptip('更新成功',2000, 'success');
                        var storage=window.localStorage;
                        storage.setItem("kmp",kmp);
					}
				})
			}
		});
	}

	$(".mui-action-back").click(function () {
        var storage=window.localStorage;
        storage.clear();
    });

	//服务顾问选中事件
	$(".sss").click(function () {
        $(".servrad").each(function () {
            $(this).removeProp('checked');
        });
        $(this).find(".servrad").prop('checked', 'checked');
        var v=$(this).find(".gname").text();
        $(".serv").text("已选:"+v);
        var storage=window.localStorage;
        storage.setItem("serv",v);
    });

	$("#backshop").click(function () {
		location.href="/shop";
    });

	mui('#servlist').on('tap','a',function(){
		window.location.href = this.href;
	});

//	//商店位置+导航
//	function shopmap(lat,lon) {
//        $.openPopup("#map");
//        var userlat= $("#lat").val();
//        var userlon= $("#lon").val();
//        var map = new AMap.Map('container', {
//            resizeEnable: true,
//            zoom: 17,
//            center: [lon, lat]
//        });
////        var markers = [{
////            position: [lon, lat]
////        }, {
////            position: [userlon, userlat]
////        }];
////        // 添加一些分布不均的点到地图上,地图上添加点标记，作为参照
////        markers.forEach(function(marker) {
////            new AMap.Marker({
////                map: map,
//////                icon: marker.icon,
////                position: [marker.position[0], marker.position[1]],
////                offset: new AMap.Pixel(-12, -36)
////            });
////        });
////        map.setFitView();
//        var button = document.getElementById('bt');
//        AMap.plugin(["AMap.Driving"], function() {
//            var drivingOption = {
//                policy:AMap.DrivingPolicy.LEAST_TIME,
//                map:map
//            };
//            var driving = new AMap.Driving(drivingOption); //构造驾车导航类
//            //根据起终点坐标规划驾车路线
//            driving.search([userlon, userlat], [lon, lat],function(status,result){
//                button.onclick = function(){
//                    driving.searchOnAMAP({
//                        origin:result.origin,
//                        destination:result.destination
//                    });
//                }
//            });
//
//        });
//        var driving = new AMap.Driving({
//            map: map,
//            panel: "panel"
//        });
        // 根据起终点经纬度规划驾车导航路线
//        driving.search(new AMap.LngLat(userlon, userlat), new AMap.LngLat(lon, lat));
//    }

        /*弹出车牌的省份*/
        function showpro() {
            $("#pro").removeAttr("style");
        }
        /*选择车牌省份后赋值过去*/
        function choocepro(province) {
            $("#carpro").text(province);
            $('#pro').attr("style","display:none");
            savecarno();
        }
        /*输入车牌号ajax存储*/
        function savecarno() {
            var carpro=$("#carpro").text();
            var carno=$("#carno1").val();
            var flag=carpro+carno;
            var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
            var result = express.test(flag);
            if(result==false){
                $.alert('请输入正确的车牌号!')
            } else {
                mui.ajax('/person/savecarno',{
                    data:{
                        carno:carpro+carno,
                        custcarid:$("#custcarid").val()
                    },
                    type:'get',//HTTP请求类型
                    success:function(data){
                        if(data=='success'){
                            $.toptip('更新成功', 'success');
                        }else {
                            $.toptip('操作失败', 'error');
                        }
                    }
                })
            }
        }

	//轮播图
	var gallery = mui('.mui-slider');
	gallery.slider({
		interval:3000//自动轮播周期，若为0则不自动播放，默认为0；3000
	});

	/*]]>*/
</script>
<link rel="stylesheet" type="text/css" th:href="@{/css/muicss/mendian-detail.css}" />

</body>

</html>